<!-- 公共 -->
<template>
  <div class="home">
    <div class="banner">
      <swiper ref="mySwiper" v-if="activeList&&activeList.length>1" :options="swiperOption">
        <swiper-slide v-for="(item, index) in bannerList" :key="index"><img :src="item" alt=""
            srcset="" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- <swiper ref="mySwiper" :options="swiperOption">
        <swiper-slide><img src="../../assets/img/banner.png" alt="" srcset="" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner.png" alt="" srcset="" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner.png" alt="" srcset="" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper> -->
    </div>

    <div class="specialArea">
      <div v-for="item in activeList" :key="item.id" @click="goGoods(item.id)">
        <div class="title">{{ item.active_name }}</div>
        <div class="box qiang">
          <div class="boxText">{{ item.prop_text }}</div>
          <div class="boxImg">
            <img :src="item.image.url" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  // 引入插件
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import "swiper/dist/css/swiper.css";
  import { NoticeBar, Swipe, SwipeItem, Toast } from "vant";

  Vue.use(NoticeBar)
    .use(Swipe)
    .use(SwipeItem)
    .use(Toast);

  import apiMar from "@/api/api";
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 3000,
            // stopOnLastSlide: false,
            disableOnInteraction: false
          },
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,
          // 显示分页
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true, //允许分页点击跳转
          // },
          // 设置点击箭头
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev"
          // }
        },

        bannerList: [],
        activeList: []
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    watch: {},
    methods: {
      goGoods(val) {
        this.$router.push({
          path: "/goods",
          query: {
            id: val
          }
        });
      },
      getData(values) {
        console.log("submit", values);
        this.submitBtn = true;
        let params = {};
        // getDetailGet('/web/home/index', params).then(res => {

        // })
        apiMar
          .getHome(params)
          .then(res => {
            console.log(res, "活动删除");
            // this.getActivityList()
            this.bannerList = res.banner;
            this.activeList = res.active;
          })
          .catch(err => {
            // this.$Message.error(err)
          });
      },
      onChange(index) {
        // Toast('当前 Swipe 索引：' + index)
      }
    },
    created() {
      this.getData();
    },

    mounted() {
      // this.swiper.slideTo(3, 1000, false)
    }
  };
</script>
<style lang="scss" scoped>
  .home {
    padding-bottom: 100px;

    .banner {
      margin-top: 30px;
      height: auto;
      width: 100%;
      overflow: hidden;

      img {
        display: block;
        height: auto;
        width: 100%;
        border-radius: 8px;
      }
    }

    .specialArea {
      width: 90%;
      margin: 0 auto;

      .title {
        color: rgba(17, 17, 17, 1);
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0 10px;
      }

      .box {
        height: auto;
        background-color: rgba(240, 239, 242, 1);
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0.2rem 0;
      }

      .qiang {
        .boxText {
          font-size: 18px;
          font-weight: bold;
          color: rgba(17, 17, 17, 1);
          flex: 1;
          text-align: center;
        }

        .boxImg {
          width: 78px;
          height: 98px;
          margin-right: 20px;

          img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            border-radius: 10px;
          }
        }
      }
    }
  }

  .swiper-slide {
    width: 90% !important;
    margin: 0 5%;
    border-radius: 8px;
  }

  .swiper-slide-prev {
    right: -8%;
  }

  .swiper-slide-next {
    left: -8%;
  }
</style>
<style></style>